
.layer-container {
    position: relative;
    .layer-content {
        padding: 5px 10px;
        height: 40px;
        border-radius: 4px;
        font-size: 13px;
        line-height: 30px;
        background-color: #eeeeee;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        .switcher {
            flex: 0 0 40px;
            width: 40px;
        }
        .title {
            flex: auto;
            width: auto;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .function-block {
            flex: 0 0 26px;
            width: 26px;
            .function-button {
                width: 26px;
                height: 30px;
                border-width: 0;
                color: #222f3e;
                background-color: transparent;
                outline: none;
                cursor: pointer;
                .ege {
                    font-size: 16px;
                }
                &.disabled,
                &[disabled],
                &[disabled]:hover {
                    color: rgba(0, 0, 0, 0.25);
                    cursor: not-allowed;
                }
                &:hover {
                    color: #1890ff;
                }
            }
            
        }
        .function-drag {
            flex: 0 0 20px;
            width: 20px;
            .drag-button {
                width: 20px;
                border-radius: 4px;
                background-color: #d2d2d2;
                cursor: move!important;
            }
        }
        &:hover {
            box-shadow: 0 0 6px rgba(0, 0, 0, .3);
        }
    }
    .disabled-mask {
        position: absolute;
        z-index: 2;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(255, 255, 255, .6);
        cursor: not-allowed;
    }
    .load-error-notice {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 3;
        .load-error-notice-content {
            position: relative;
            padding: 6px;
            height: 40px;
            text-align: right;
            .notice-icon {
                position: absolute;
                top: 50%;
                left: -7px;
                margin-top: -7px;
                width: 14px;
                height: 14px;
                .notice-icon-error {
                    color: #f04134;
                }
            }
            .notice-operate-btn {
                box-shadow: 0 0 8px rgba(0, 0, 0, .2);
                transform: translateX(-50px);
                transition: all .3s cubic-bezier(0.215, 0.61, 0.355, 1);
                opacity: 0;
                &.notice-operate-btn-reload {
                    transition-delay: .15s;
                }
                &.notice-operate-btn-remove {
                    transition-delay: 0;
                }
            }
            &:hover {
                .notice-operate-btn {
                    transform: translateX(0);
                    opacity: 1;
                }
            }
        }
    }
}

